<!-- catalogList.html 2017-09-07 15:28:45-->
#@HplusLayout()
#define content()
<div class="gray-bg" style="padding:0 10px;height: 100%">
	<div class="row">
		<div class="col-xs-4">		
			<div class="ibox">
				<div class="ibox-title">
					<h5>分类目录</h5>
					<div class="pull-right">
						<a href="javascript:" style="font-size:12px;color: #666" onclick="expandAll(true);" title="全部展开">展开</a>  
						<a href="javascript:" style="font-size:12px;color: #666" onclick="expandAll(false);" title="全部展开">收起</a>  
						<a href="javascript:" style="font-size:12px;color: #666" onclick="add(0);">新增根分类</a>
					</div>
				</div>
				<div class="ibox-content">
					<ul id="ZTree" class="ztree"></ul>
				</div>
			</div>	
		</div>
		<div class="col-xs-8" id="addEdit">
			<div class="ibox">
				<div class="ibox-title">
					<h5>分类编辑</h5>
				</div>
				<div class="ibox-content">
					<div style="text-align: center;line-height: 50px">
						<i class="glyphicon glyphicon-repeat"></i> 点击左侧树形菜单或新增按钮
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
#end
#define css()
<link href="#(res_path)/hplus/css/plugins/ztree/metroStyle/metroStyle.css" rel="stylesheet">
#end
#define js()
<script src="#(res_path)/hplus/js/plugins/validate/jquery.validate.min.js"></script>
<script src="#(res_path)/hplus/js/plugins/validate/messages_zh.min.js"></script>
<script src="#(res_path)/hplus/js/plugins/ztree/jquery.ztree.all.min.js"></script>
#end
#define jsFunction()
<script>
	var zNodes = #(listJSON??"[]");
 	$().ready(function() {
		$.fn.zTree.init($("#ZTree"), {
			data: {
				simpleData: {enable: true}
			},
			callback:{onClick:treeOnClick}
			}, zNodes);
	});
	
	function add(id){
		$("#addEdit").loadUrl("addEditCatalog?parent_id="+id,{},function(){
			initUI(document.getElementById("addEdit"));
		});
	}
	function thisAjaxDone(json){
		hplus.ajaxDone(json);
		var treeObj = $.fn.zTree.getZTreeObj("ZTree");
		var node = treeObj.getNodeByParam("id", json.object.id, null);
		if(node){
			node.name = json.object.name;
			treeObj.updateNode(node);
		}else {
			var newNode = {id:json.object.id, pId:json.object.parent_id, name:json.object.name};
			var parent = null;
			if(json.object.parent_id!=null){
				parent = treeObj.getNodeByParam("id", json.object.parent_id, null);
			}
			treeObj.addNodes(parent, newNode);
		}
		$("#addEdit").loadUrl("addEditCatalog",{id:json.object.id},function(){
			initUI(document.getElementById("addEdit")); 
		});
	}
	function deleteAjaxTodo(json){
		hplus.ajaxDone(json);
		if(json.result=="success"){
			var treeObj = $.fn.zTree.getZTreeObj("ZTree");
			var node = treeObj.getNodeByParam("id", json.id, null);
			treeObj.removeNode(node);
			closeEdit();
		}
	}
	var addEditHtml = $("#addEdit").html();
	function closeEdit(){
		$("#addEdit").html(addEditHtml);
	}
  function treeOnClick(event, treeId, treeNode){
		$("#addEdit").loadUrl("addEditCatalog",{id:treeNode.id},function(){
			initUI(document.getElementById("addEdit"));
		});
  }
	function expandAll(flag){
		var treeObj = $.fn.zTree.getZTreeObj("ZTree");
		treeObj.expandAll(flag);
	}
 </script>
#end